<template>
  <div class="box" @mouseenter="isShow = true"
       @mouseleave="isShow=false"
  >
    <div class="search-area">
      <input type="text" placeholder="Search ....">
      <div class="icon-search"></div>
      <dialog class="history" :open="isShow" v-if="isShow">
        <div v-if="props.data.length===0">没有搜索记录</div>
        <div v-for="item in props.data">
          {{ item }}
        </div>
      </dialog>

    </div>

  </div>
</template>

<script lang="ts" setup>
import {ref} from "vue";

const isShow = ref(false)

const props = defineProps({
  data: {
    type: Array,
    default: [],
    require: false
  }
})

</script>

<style lang="less" scoped>

.box {
  -webkit-app-region: no-drag; //禁止可拖拽，不然会失焦点

  margin-top: 5px;
  width: 250px;
  height: 30px;
  border-radius: 5px;
  position: relative;
  opacity: 0.8;
  z-index: 100;
  background-image: linear-gradient(to top, #cfd9df 0%, #e2ebf0 100%);

  .search-area {
    width: 100%;
    height: 30px;
    display: flex;
    align-content: center;
    padding: 2px 5px 2px 5px;

    input {
      width: 90%;
      background: none;
      outline: none;
      border: none;
    }

    input:focus {
      border: none;
    }

    .icon-search {
      width: 24px;
      height: 24px;
      background-image: url("@/assets/icons/search.svg");
      background-size: 24px 24px;
      background-position: center;
      background-repeat: no-repeat;
    }
  }


}

.history {
  width: 100%;
  height: 200px;
  top: 30px;
  border-radius: 5px;
  border: none;
  color: black;
  background-image: linear-gradient(to top, #cfd9df 0%, #e2ebf0 100%);
}

</style>